<%@ page language="java" contentType="text/html; charset=utf8"
    pageEncoding="utf8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath }/js/script.js"></script>
    <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
    <meta charset="UTF-8">
    <title>Audit Merchant</title>
</head>
<body class="layout-background">
<nav class="navbar navbar-default nav-bar-top">
    <div class="layout-width">
        <div class="navbar-header">
            <a href="javascript:void(0)" class="navbar-brand">ITA Order System</a>
        </div>
        <!-- <div class="pull-right" style="font-size: 20px;position: relative;top: 10px;right: 55px;">
            <label class="control-label">Hello: </label>
            <a href="merchantHome.html">Freedy</a>

            <div style="margin-left: 70px;margin-top: -8px;">
                <a class="btn btn-danger btn-xs" href="javascript:void(0)">Logout</a>
            </div>
        </div> -->
    </div>
</nav>
<div id="menu-panel" class="menu-container menu-close">
    <ul style="margin-top: 30px" class="nav nav-pills nav-stacked">
<!--         <li style="white-space:nowrap; " role="presentation">
            <a href="./../"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;&nbsp;&nbsp;Home</a>
        </li> -->
        <li style="white-space:nowrap; " role="presentation" class="active">
            <a href="javascript:void(0)"><span class="glyphicon glyphicon-check"></span>&nbsp;&nbsp;&nbsp;&nbsp;Audit Merchants</a>
        </li>
        <li style="white-space:nowrap; " role="presentation">
            <a href="./../merchant/lowGrade"><span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp;&nbsp;&nbsp;&nbsp;Low Grade Merchant</a>
        </li>
        <li style="white-space:nowrap; " role="presentation">
            <a href="./../dish/list"><span class="glyphicon glyphicon-apple"></span>&nbsp;&nbsp;&nbsp;&nbsp;Audit Dish</a>
        </li>
        <li style="white-space:nowrap; " role="presentation">
            <a href="./../complaint/list"><span class="glyphicon glyphicon-thumbs-down"></span>&nbsp;&nbsp;&nbsp;&nbsp;Complaint
                List</a>
        </li>
    </ul>
</div>
<div id="operation-panel" class="operation-container">
    <div class="body-panel" style="min-height: 680px">
        <!-- <div class="pull-right input-group">
            <form>
                <input style="width: 170px;" type="text" class="form-control" placeholder="Search by name/tel...">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Search</button>
                    </span>
            </form>
        </div> -->
        <div style="width: 95%;margin: auto;position: relative;">
            <table class="table table-striped" style="width: 100%">
                <thead>
                <tr>
                    <th style="text-align: center">Logo</th>
                    <th style="text-align: center">Name</th>
                    <th style="text-align: center">Address</th>
                    <th style="text-align: center">Tel</th>
                    <th style="text-align: center">Application date</th>
                    <th style="text-align: center">Status</th>
                    <th ></th>
                    <th ></th>
                    <th ></th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="item" items="${merchantList}">                
	                <tr id="merchant-${item.merchant.mId}">
	                    <td style="text-align: center;vertical-align: middle" width="13%"><img style="width:95px" src="http://zha-ita115-w7:9000${ item.merchant.logo}"></td>
	                    <!-- <td style="text-align: center;vertical-align: middle" width="13%"><img style="width:95px" src="/images/freedy.jpg"></td> -->
	                    <td style="text-align: center;vertical-align: middle" width="13%">${item.merchant.mName}</td>
	                    <td style="text-align: center;vertical-align: middle" width="13%">${item.merchant.address}</td>
	                    <td style="text-align: center;vertical-align: middle" width="13%">${item.merchant.mTel}</td>
	                    <td style="text-align: center;vertical-align: middle" width="13%">${item.createDate}</td>
	                    <c:choose>
	                    	<c:when test="${item.auditStatus == 0}">
	                    		<td id="status-" style="text-align: center;vertical-align: middle" width="13%">Pending audit</td>
	                    		<td style="text-align: center;vertical-align: middle" width="7%"><button onclick="passAudit('${item.merchant.mId}')" class="btn btn-primary">Active</button></td>
	                    		<td style="text-align: center;vertical-align: middle" width="7%"><button onclick="failedAudit('${item.merchant.mId}')" class="btn btn-warning">Refuse</button></td>
	                    		<td style="text-align: center;vertical-align: middle" width="7%"><button onclick="confirmBlock('${item.merchant.mId}','am')" disabled="disabled" class="btn btn-default">Block</button></td>
	                    	</c:when>
	                    	<c:when test="${item.auditStatus == 1}">
	                    		<td style="text-align: center;vertical-align: middle" width="13%">Audit pass</td>
	                    		<td style="text-align: center;vertical-align: middle" width="7%"><button onclick="passAudit('${item.merchant.mId}')" disabled="disabled" class="btn btn-default">Active</button></td>
			                    <td style="text-align: center;vertical-align: middle" width="7%"><button onclick="failedAudit('${item.merchant.mId}')" disabled="disabled" class="btn btn-default">Refuse</button></td>
			                    <td style="text-align: center;vertical-align: middle" width="7%"><button onclick="confirmBlock('${item.merchant.mId}','am')" class="btn btn-danger">Block</button></td>
	                    	</c:when>
	                    	<c:when test="${item.auditStatus == 2}">
	                    		<td style="text-align: center;vertical-align: middle" width="13%">Audit not pass</td>            	
			                    <td style="text-align: center;vertical-align: middle" width="7%"><button onclick="passAudit('${item.merchant.mId}')" disabled="disabled" class="btn btn-default">Active</button></td>
			                    <td style="text-align: center;vertical-align: middle" width="7%"><button onclick="failedAudit('${item.merchant.mId}')" disabled="disabled" class="btn btn-default">Refuse</button></td>
			                    <td style="text-align: center;vertical-align: middle" width="7%"><button onclick="confirmBlock('${item.merchant.mId}','am')" disabled="disabled" class="btn btn-default">Block</button></td>
	                    	</c:when>
	                    	<c:when test="${item.auditStatus == 3}">
	                    		<td style="text-align: center;vertical-align: middle" width="13%">Blocked</td>  	                    	
			                    <td style="text-align: center;vertical-align: middle" width="7%"><button onclick="passAudit('${item.merchant.mId}')" onclick="passAudit('${item.merchant.mId}')" class="btn btn-primary">Active</button></td>
			                    <td style="text-align: center;vertical-align: middle" width="7%"><button disabled="disabled" class="btn btn-default">Refuse</button></td>
			                    <td style="text-align: center;vertical-align: middle" width="7%"><button onclick="confirmBlock('${item.merchant.mId}','am')" disabled="disabled" class="btn btn-default">Block</button></td>
	                    	</c:when>
	                    </c:choose>
	                </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    	<div class="modal fade bs-example-modal-sm" id="confirmModel"
		tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">Warning</div>
				<div class="modal-body">Are you sure to block this merchant?</div>
				<div class="text-right"
					style="padding-right: 15px; padding-bottom: 7px;">
					<button id="confirm" class="btn btn-danger" data-dismiss="modal">
						Yes</button>
					&nbsp;&nbsp;&nbsp;
					<button class="btn btn-info" data-dismiss="modal">Cancel</button>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>